<template>
  <div class="login-container">
    <div class="login-bj">
      <div class="login_box">
        <div class="avatar_box">
          <img src="../../assets/登录页/智慧社区管理平台.png" alt />
        </div>
        <el-form class="login_form" :model="loginForm">
          <div class="input_title">账户</div>
          <el-form-item>
            <el-input type="text" v-model="loginForm.username" />
          </el-form-item>
          <!-- 下半 -->
          <div class="input_title">密码</div>
          <el-form-item>
            <el-input type="password" name="password" v-model="loginForm.password" />
          </el-form-item>
          <el-form-item>
            <el-checkbox-group v-model="form.type">
              <el-checkbox label="记住密码" name="type" class="inners"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item class="btns">
            <el-button type="primary" @click="login">登录</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  components: {},
  data() {
    return {
      form: {
        type: []
      },
      loginForm: {
        username: "admin",
        password: "admin"
      }
    };
  },
  watch: {},
  created() {},
  mounted() {},
  destroyed() {},
  methods: {
    login() {
      if (
        this.loginForm.username === "admin" &&
        this.loginForm.password === "admin"
      ) {

        window.sessionStorage.setItem("cooks", "yes");
        this.$router.push("/today/index");
      }
    }
  }
};
</script>


<style lang="scss" scoped>
.login-container {
  width: 100%;
  height: 100%;
  .login-bj {
    width: 100%;
    height: 100%;
    background: url("../../assets/登录页/bj.jpg");
    background-repeat: no-repeat;
    background-size: cover;

    .login_box {
      padding: 2.917rem 50px;
      width: 25rem;
      height: 25rem;
      background-color: #fff;
      border-radius: 0.125rem;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      .avatar_box {
        margin-bottom: 1.25rem;
        width: 19rem;
        img {
          width: 100%;
          height: 100%;
        }
      }
      .input_title {
        color: #929091;
        font-size: 0.833rem;
        margin-top: 0.833rem;
        margin-bottom: 0.417rem;
      }
      .btns {
        width: 19rem;
        .el-button {
          width: 100%;
          height: 2.5rem;
        }
      }
    }
  }
}
</style>
<style>
.inners .el-checkbox__inner {
  width: 0.75rem !important;
  height: 0.75rem !important;
}
</style>
